<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #main {
        margin: 100px auto;
        width: 450px;
        height: 650px;
        border: 2px solid rgb(77, 77, 77);
      }
    </style>
  </head>
  <body>
    <div id="main"></div>
    <script src="./lib/echarts.min.js"></script>
    <script>
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"))
      var datas = [
        [
          { name: "1万以下", value: 5.6 },
          { name: "1-1.5万", value: 1 },
          { name: "1.5-2万", value: 0.8 },
          { name: "2万以上", value: 0.5 },
        ],
        // ////////////////////////////////////////
        [
          { name: "1万以下", value: 3.8 },
          { name: "1-1.5万", value: 2.3 },
          { name: "1.5-2万", value: 2.2 },
          { name: "2万以上", value: 1.3 },
        ],
      ]
      option = {
        title: [
          {
            text: "男女薪资分布",
            left: "12%",
            top: "8%",
            textStyle: {
              color: "#474747",
              fontWeight: "bold",
              fontSize: 16,
            },
          },
          {
            subtext: "男生",
            left: "49%",
            top: "41%",
            textAlign: "center",
            subtextStyle: {
              color: "#464646",
              fontSize: 16,
              fontWeight: "bold",
            },
          },
          {
            subtext: "女生",
            left: "49%",
            top: "80%",
            textAlign: "center",
            subtextStyle: {
              color: "#464646",
              fontSize: 16,
              fontWeight: "bold",
            },
          },
        ],
        series: datas.map(function (data, idx) {
          var top = idx * 38
          return {
            type: "pie",
            radius: [40, 60],
            top: top + "%",
            height: "60%",
            left: "center",
            width: 350,
            label: {
              alignTo: "edge",
              formatter: "{name|{b}}",
              minMargin: 5,
              edgeDistance: 35,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999",
                },
              },
            },
            data: data,
          }
        }),
        color: ["#fda224", "#5097ff", "#3abcfa", "#34d39a"],
        top: "80%",
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    </script>
  </body>
</html>
